import React from "react";
import stys from "./averagePremiumPerUnit.module.scss";
import XxtvCard from "../card/xxtv-card";
import AntdProgress from "@/antd/Progress/Porgress";


const ProgressInfo = ({averPremium=0.00}) => {
    return (
        <>
            <div className={stys.progressContent}>
                <div className="item value">
                    <span className="text">{averPremium.toFixed(2)}</span>
                    {/* <span className="prent">%</span> */}
                </div>
                <div className="item label">单均保费</div>
            </div>
        </>
    )
}

const AaveragePremiumPerUnit = ({
    style,
    averPremium = 0,
    newAverPremium = 0,
    renewalAverPremium = 0,
    reinsurAverPremium = 0,
    carAverPremium = 0,
    noCarAverPremium = 0,

}) => {
    return (
        <>
            <XxtvCard
                title="单均保费"
                style={{ ...style }}
            >
                <div className={stys.box}>
                    <div className="circle-box">
                        <AntdProgress
                            size={[180, 20]}
                            strokeLinecap="round"
                            percent={100}
                            format={() => <ProgressInfo 
                                averPremium={averPremium}
                            />}
                        />
                    </div>
                    <div className="content">
                        <div className="top">
                            <div className="text-item">
                                <div className="text-content">
                                    <div className="value">{carAverPremium.toFixed(2)}</div>
                                    <div className="label">车险单均</div>
                                </div>
                            </div>
                            <div className="text-item">
                                <div className="text-content">
                                    <div className="value">{noCarAverPremium.toFixed(2)}</div>
                                    <div className="label">非车单均</div>
                                </div>
                            </div>
                        </div>
                        <div className="bottom">
                            <div className="info-item">
                                <span className="icon color1"></span>
                                <span className="label">新保单均：</span>
                                <span className="label">{newAverPremium.toFixed(2)}</span>
                            </div>
                            <div className="info-item">
                                <span className="icon color2"></span>
                                <span className="label">续保单均：</span>
                                <span className="label">{renewalAverPremium.toFixed(2)}</span>
                            </div>
                            <div className="info-item">
                                <span className="icon color3"></span>
                                <span className="label">转保单均：</span>
                                <span className="label">{reinsurAverPremium.toFixed(2)}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </XxtvCard>
        </>
    )
}
export default AaveragePremiumPerUnit;